<html>
<body>
<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<style>
    table,table tr th, table tr td { border:1px solid #0094ff; }
    table {
        width: 800px;
        min-height: 25px;
        line-height: 25px;
        text-align: center;
        border-collapse: collapse;
    }
    #tr-head th{
        text-align:center;
    }
    .model-input {
        width: 170px;
    }
</style>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="/js/jquery-2.1.0.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table class="table">
    <thead>
    <tr id="tr-head">
        <th>姓名</th>
        <th>地址</th>
        <th>手机号</th>
        <td>
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                新增
            </button>
        </td>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${list}" var="resume">
        <tr>
            <td>${resume.name}</td>
            <td>${resume.address}</td>
            <td>${resume.phone}</td>
            <td>
                <button value="${resume.id}" class="del-button" onclick=""/>删除
                <br>
                <button value="${resume.id}" class="btn btn-primary btn-lg edit-button" data-toggle="modal" data-target="#myModal-edit" >
                    编辑
                </button>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
style="min-width: 800px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    请添加数据
                </h4>
            </div>
            <div class="modal-body">
                <table class="table">
                    <caption></caption>
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>地址</th>
                        <th>手机号</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><input  class="model-input" id="add-name" type="text" name="name"></td>
                        <td><input class="model-input"  id="add-address" type="text" name="address"></td>
                        <td><input class="model-input"  id="add-phone" type="text" name="phone"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary add-button">
                    确认
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div>
</div>

<div class="modal fade" id="myModal-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-edit" aria-hidden="true"
style="min-width: 800px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel-edit">
                    模请编辑数据
                </h4>
            </div>
            <div class="modal-body">
                <table class="table">
                    <caption></caption>
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>地址</th>
                        <th>手机号</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <input class="model-input"  id="edit-id-input" type="text" hidden name="id">
                        <td><input class="model-input"  id="edit-name-input" type="text" name="name"></td>
                        <td><input class="model-input" id="edit-address-input" type="text" name="address"></td>
                        <td><input class="model-input"  id="edit-phone-input" type="text" name="phone"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary edit-button-ajax">
                    确认
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script>
    $(function () {
        debugger;
       /* $.ajax({
            url: '/resume/api/list',
            type: 'get',
            data: '{"id":"1","name":"李四"}',
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            success: function (data) {
                console.log(data);
            }
        }) */


        $(".edit-button").bind("click",function () {
            debugger
            var id = $(this).val();
            var name = $(this).parent("td").parent("tr").children('td:first').text();
            var address = $(this).parent("td").parent("tr").children('td').eq(1).text();
            var phone = $(this).parent("td").parent("tr").children('td').eq(2).text();
            $("#edit-id-input").val(id);
            $("#edit-name-input").val(name);
            $("#edit-address-input").val(address);
            $("#edit-phone-input").val(phone);
        });
        $(".edit-button-ajax").bind("click",function () {

            var id = $("#edit-id-input").val();
            var name = $("#edit-name-input").val();
            var address = $("#edit-address-input").val();
            var phone = $("#edit-phone-input").val();
            // 发送ajax请求
            $.ajax({
                url: '/resume/api/edit',
                type: 'post',
                data: JSON.stringify({"id":id,"name":name,"address":address,"phone":phone}),
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (data) {

                    console.log("编辑成功")
                    $("#myModal-edit").modal('hide')
                    window.location.reload()
                },error:function (data) {

                    console.log("编辑失败")
                }
            })

        });
        $(".del-button").click(function () {

            var id = $(this).val();
            console.log("id: " +id);
            // 发送ajax请求
            $.ajax({
                url: '/resume/api/delete',
                type: 'post',
                data: JSON.stringify({"id":id}),
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (data) {
                    debugger
                    console.log(data);
                    window.location.reload()

                },error: function (data) {
                    debugger
                }
            })
        });
        $(".add-button").click(function () {
            var name = $("#add-name").val();
            var address = $("#add-address").val();
            var phone = $("#add-phone").val();
            // 发送ajax请求
            $.ajax({
                url: '/resume/api/save',
                type: 'post',
                data: JSON.stringify({"name":name,"address":address,"phone":phone}),
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (data) {

                    console.log("新增成功")
                    $("#myModal").modal('hide')
                    window.location.reload()
                },error:function (data) {

                    console.log("新增失败")
                }
            })
        });

    })
</script>

</html>
